<template>
  <div>
    <div class="main w">
      <div class="right1">
        <div class="rightTop">
          <span class="depName">{{personInfo.departmentName}}</span> :
          <span class="rateName">{{personInfo.name}}</span>
        </div>
        <!-- 是本人只显示满意次数 -->
        <div v-if=" personData.isCurrentUser == true" class="rightMain">
          <div class="personsPhoto">
            <img :src="imgSrc + personInfo.employeeId" alt="" :onerror="headPortrait">
            
          </div>
          <div class="personsMessage">
            <p>
              姓名:
              <span class="personName">{{personInfo.name}}</span>
            </p>
            <p>
              职责:
              <span class="personRole">{{personInfo.role}}</span>
            </p>
          </div>
          <div class="contentMain">
            <div class style="folat:left">
              <el-table
                :data="satisfiedData"
                style="width: 88%;margin: 10px 50px 6%;fontSize:18px"
                border
                stripe
                header-align="center"
                :header-cell-style="elementStyleObj"
                empty-text="暂无评价记录"
              >
                <el-table-column
                  prop="satisfiedCount"
                  label="满意"
                  header-align="center"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="unSatisfiedCount"
                  label="不满意"
                  header-align="center"
                  align="center"
                ></el-table-column>
              </el-table>
            </div>
          </div>
        </div>
        <!-- 不是本人显示评价题目 -->
        <div v-if=" personData.isCurrentUser == false" class="rightMain">
          <div class="personsPhoto">
            <img :src="imgSrc + personInfo.eid" alt="" :onerror="headPortrait">
          </div>
          <div class="personsMessage">
            <p>
              姓名:
              <span class="personName">{{personInfo.name}}</span>
            </p>
            <p>
              职责:
              <span class="personRole">{{personInfo.role}}</span>
            </p>
          </div>
          <!-- 题目开始 -->
          <div class="contentMain">
            <div class="criterion">
              <ul>
                <!--遍历题目 -->
                <li class="questionLi" v-for="(item,index) in questionList" :key="item.index">
                  <span class="unitName">{{index+1}}. {{item.title}}</span>
                  <!-- 判断选择题 -->
                  <ul v-if="item.typeId == 1" class="selectBox2">
                    <li class="questionInput" v-for="items in item.answers" :key="items.id">
                      <input
                        @change="hint(index)"
                        class="radioClass"
                        type="radio"
                        :name="item.title"
                        :id="items.id"
                        :value="items.answerDesc + '/'+ personInfo.departmentId +'/' + personInfo.eid + '/' + item.questionnaireId +'/'+ items.id "
                        v-model="requiredRadio[index]"
                      >
                      <span>{{items.answerDesc}}</span>
                    </li>
                  </ul>
                  <!-- 判断简答题 -->
                  <div class="personTxtAreas" v-if="item.typeId == 2">
                    <textarea
                      name="txt"
                      class="txtAreas"
                      required="required"
                      warp="virtual"
                      placeholder="请简要说明"
                      maxlength="800"
                      @input="blankDescArea"
                      v-model="textaresList[index]"
                      :data-text=" requiredRadio[index] = textaresList[index] + '/' + personInfo.departmentId +'/' + personInfo.eid + '/' + item.questionnaireId "
                    ></textarea>
                  </div>
                </li>
              </ul>
            </div>
            <div class="subBtn" @click="submit" :disabled="isDisable">提 交</div>
            <!-- 历史记录 -->
            <div class="historyTable" style="folat:left">
              <el-table
                :data="historyList"
                show-header
                border
                stripe
                align="center"
                empty-text="暂无历史评价数据"
                :header-cell-style="elementStyleObj"
                style="width: 98%;margin: 10px 1% 10px"
              >
                <el-table-column type="index" align="center" label=" "></el-table-column>
                <el-table-column
                  prop="positive"
                  label="是否满意"
                  width="120"
                  header-align="center"
                  align="center"
                >
                  <template slot-scope="scope">
                    <el-tag
                      disable-transitions
                      :type="scope.row.positive === false ? 'danger' : 'success'"
                    >{{scope.row.positive == true ? '满意' : '不满意'}}</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="detail" label="历史评价内容" header-align="center"></el-table-column>
                <el-table-column
                  prop="evaluateTime"
                  label="时间"
                  width="180"
                  header-align="center"
                  align="center"
                ></el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import bus from "../../components/common";
import api from "../../util/api.js";
export default {
  inject: ["reload"], //在App.vue声明,现在注入reload方法
  name: "person",
  data() {
    return {
      personData: [], //判断是否是本人
      personInfo: {}, //个人信息
      //满不满意数据
      satisfiedData: [
        {
          satisfiedCount: 0,
          unSatisfiedCount: 0
        }
      ],
      elementStyleObj: {
        //element 表头样式
        background: "rgb(245, 249, 255) ",
        fontSize: "20px",
        color: "#434343"
      },
      textaresList: [], //简答题数据
      requiredRadio: [], //获取单选信息
      index: 0, //题目索引
      ridioTaAn: false, //选中答案
      txtTaAn: false, //输入框
      questionList: [], //题目列表
      historyList: [], //已评价历史记录
      evaluateSubmit: [], // 最终提交的数据
      isDisable: false, //表单重复提交
      headPortrait: 'this.src="' + require("../../assets/def1.png") + '"', //头像加载不出来的话显示
      imgSrc: api.findImage, //头像的地址

    };
  },
  watch: {
    $route: function(newValue, oldValue) {
      this.blankDescArea();
    }
  },
  created() {
    this.getQuestion();
    this.getEvaluatedInfo();
    this.blankDescArea();
  },
  methods: {
    //校验输入是否为空格
    blankDescArea() {
      var textVal = this.textaresList;
      // console.log("jj", textVal);
      textVal.forEach((j, idx) => {
        var answersStr = j.split("/")[0];
        // console.log("idx",idx);
        if (answersStr.match(/^\s*$/)) {
          this.$message({
            showClose: false,
            message: "第" + (idx + 1) + "题不能为空!!",
            type: "error",
            center: true, //文字居中
            customClass: "user-defined-style",
            duration: 1500
          });
          this.textaresList[idx] = "";
          return;
        }
      });
    },
    // 文本弹窗
    txtMessageBox() {
      this.$message({
        showClose: false,
        message: "请简要说明理由!",
        type: "error",
        center: true, //文字居中
        customClass: "user-defined-style",
        duration: 2000
      });
      this.evaluateSubmit = []; //把已经添加的数据清空
      return (this.txtTaAn = false);
    },
    //单选弹窗
    ridioMessageBox() {
      this.$message({
        showClose: false,
        message: "请对她（他）的服务做出评价!",
        type: "error",
        center: true, //文字居中
        customClass: "user-defined-style",
        duration: 2000
      });
      this.evaluateSubmit = []; //把已经添加的数据清空
      return (this.ridioTaAn = false);
    },
    // 校验是否全部填完
    verify() {
      var arr = this.requiredRadio; //保存已经评价的内容
      this.questionList.forEach((items, index) => {
        // console.log("item",items,"index",index);

        if (items.necessary == 1) {
          if (items.typeId == 2) {
            var b = arr[index].split("undefined");
            // console.log("bbb", b, "arr", arr);
            if (b.length > 1) {
              this.txtMessageBox(); //调用弹窗方法
            } else {
              return (this.txtTaAn = true);
            }
          } else if (items.typeId == 1) {
            // console.log("uosyin", arr[index]);
            if (typeof arr[index] == "undefined") {
              this.ridioMessageBox();
            } else {
              this.ridioTaAn = true;
            }
          }
        } else {
          this.setAnswerData();
        }
        if (this.txtTaAn == true && this.ridioTaAn == true) {
          this.setAnswerData();
        }
      });
    },
    //点击弹窗说明理由
    hint(index) {
      this.$message({
        showClose: false,
        message: "请简要说明理由!",
        type: "success",
        center: true, //文字居中
        customClass: "user-defined-style",
        duration: 1000
      });
    },
    //校验提交内容
    //提交
    submit() {
      this.isDisable == true; //开始可以点击
      //拼接
      this.requiredRadio.forEach(j => {
        var answersArr = j.split("/");
        // console.log("fen", answersArr);
        if (answersArr[4] == "undefined") {
          answersArr[4] = "";
          this.evaluateSubmit.push({
            answerDesc: answersArr[0],
            evaluatedDepartmentId: answersArr[1],
            evaluatedEmployeeId: answersArr[2],
            questionnaireId: answersArr[3],
            answerId: answersArr[4]
          });
        } else {
          this.evaluateSubmit.push({
            answerDesc: answersArr[0],
            evaluatedDepartmentId: answersArr[1],
            evaluatedEmployeeId: answersArr[2],
            questionnaireId: answersArr[3],
            answerId: answersArr[4]
          });
        }
      });
      // console.log("拼接", this.evaluateSubmit);
      this.evaluateSubmit.forEach(k => {
        // console.log("123", k.answerDesc);
        if (k.answerDesc == "undefined") {
          this.$message({
            showClose: false,
            message: "请简要说明理由!",
            type: "error",
            center: true, //文字居中
            customClass: "user-defined-style",
            duration: 2000
          });
          this.evaluateSubmit = []; //把已经添加的数据清空
          return;
        }
      });
      if (this.evaluateSubmit.length < this.questionList.length) {
        this.$message({
          showClose: false,
          message: "请对她（他）的服务做出评价!",
          type: "error",
          center: true, //文字居中
          customClass: "user-defined-style",
          duration: 2000
        });
        this.evaluateSubmit = []; //把已经添加的数据清空
        return;
      }
      this.setAnswerData(); //发送答案
      this.isDisable == false; //执行请求后就不能点击了
    },
    //发送答案
    setAnswerData() {
      this.axios({
        url: "api/employee/submit",
        method: "post",
        data: { answers: this.evaluateSubmit },
        headers: {
          "Content-Type": "application/json"
        }
      }).then(response => {
        this.isDisable == false; //执行请求后就不能点击了
        if (response.data.code == 0) {
          //成功
          this.backData = response.data.data;
          this.$alert("下拉页面查看历史评价记录", "提交成功!", {
            confirmButtonText: "确定",
            type: "success"
          }).then(() => {
            this.reload(); //重新加载当前页面
            
            // const wsurl ="wss://m.szpt.edu.cn/evaluate/socket/employee/message";
            this.websock = new WebSocket(api.message); //这里面的this都指向vue
            this.websock.onopen = this.websocketopen;
            this.websock.onmessage = this.websocketonmessage;
            this.websock.onclose = this.websocketclose;
            this.websock.onerror = this.websocketerror;
            // console.log("wsback数据222", this.backData);
            const urls = `send/message?employeeId=${
              this.textaresList.evaluatedEmployeeId
            }&resultTextId=${this.backData}`; //模板字符串
            this.axios.get(urls).then({});
          });
          return;
        } else {
          this.$alert(response.data.message, "提示", {
            confirmButtonText: "确定",
            type: "warning"
          }).then(() => {
            this.reload(); //重新加载当前页面
            var roll =
              document.body.scrollTop || document.documentElement.scrollTop;
            roll = 800;
          });
          return;
        }
      });
    },
    //根据id获取员工细信息
    getEvaluatedInfo() {
      var personId = this.$route.params;
      // console.log("个人id", personId);
      const url = `api/employee/findEvaluatedInfoByEid?eid=${
        this.$route.params.personEid
      }&departmentId=${this.$route.params.departmentId}`;
      this.axios.post(url).then(response => {
        this.personData = response.data.data; //获取所有信息
        // console.log("获取所有信息", this.personData);

        this.personInfo = response.data.data.list;
        // console.log("个人信息", this.personInfo);
        //满意次数
        this.satisfiedData[0].satisfiedCount =
          response.data.data.list.satisfiedCount;
        //不满意次数
        this.satisfiedData[0].unSatisfiedCount =
          response.data.data.list.unSatisfiedCount;
        // 获取历史记录
        this.historyList = response.data.data.list.historyList;
        // console.log("历史记录",this.historyList);
        this.$nextTick(function() {
          // document.documentElement.scrollTop = 500
        });
        this.textaresList.evaluatedDepartmentId =
          response.data.data.list.departmentId; //部门信息
        // console.log("部门信息", this.textaresList.evaluatedDepartmentId);

        this.textaresList.evaluatedEmployeeId = response.data.data.list.eid;
        this.manEid = response.data.data.list.eid;
      });
    },
    //获取评价题目信息
    getQuestion() {
      const url = `api/employee/findQuestionnaires`;
      this.axios.post(url).then(response => {
        this.questionList = response.data.data;
        // console.log("题目", this.questionList);
      });
    }
  }
};
</script>

<style scoped>
  /* alert提示框样式 */
  .user-defined-style {
    top: 46%;
  }
  .historyTable {
    font-family: "Microsoft" !important;
    width: 98%;
    margin: 20px 1% 30px;
    padding-bottom: 8px;
    -webkit-box-shadow: 0px 6px 6px #e0e0e0;
    box-shadow: 0px 3px 6px #e0e0e0;
    cursor: pointer;
  }
  .el-table .warning-row {
    background: oldlace;
    background: rgb(234, 249, 255);
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>